import React from "react"
import "../css/input.css"
import {PENDDING} from "./Mana"

class InputBox extends React.Component{
    //定义组件的初始化状态
    constructor(props){
        super(props)
    }

    
    render() {
        return(
            <div className="input_container">
                <h2>ToDoList</h2>
                <div className="input_container_put">
                    <input type="text"
                    ref="todoInput"></input>
                </div>
                <div className="input_container_btn">
                    <button onClick={()=>{
                        //获取输入框的内容
                        var value = this.refs.todoInput.value;
                        //容错判断
                        if(value.length===0){
                            alert("内容不能为空")
                            return
                        }
                        //组装todo 对象
                        var todo={
                            content:value,
                            status:PENDDING//未经定义的魔法值
                        }
                        this.props.addTodo(todo)

                    }}>添加</button>
                </div>
            </div>
        );
    }




}

export default InputBox;